<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="icon" href="/国徽1024.png" />
    <meta name="renderer" content="webkit" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <style>
        .loading-container {
          position: absolute;
          top: 50%;
          left: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          background-color: rgb(247 247 247);
          transform: translate(-50%, -50%);
        }

        .dash {
          width: 35px;
          height: 15px;
          margin: 0 15px;
          background: #406eeb;
          border-radius: 8px;
          box-shadow: 0 0 10px 0 #6ba8eedf;
        }

        .uno {
          margin-right: -18px;
          transform-origin: center left;
          animation: spin 3s linear infinite;
        }

        .dos {
          transform-origin: center right;
          animation: spin2 3s linear infinite;
          animation-delay: 0.2s;
        }

        .tres {
          transform-origin: center right;
          animation: spin3 3s linear infinite;
          animation-delay: 0.3s;
        }

        .cuatro {
          transform-origin: center right;
          animation: spin4 3s linear infinite;
          animation-delay: 0.4s;
        }

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }

          25% {
            transform: rotate(360deg);
          }

          30% {
            transform: rotate(370deg);
          }

          35% {
            transform: rotate(360deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes spin2 {
          0% {
            transform: rotate(0deg);
          }

          20% {
            transform: rotate(0deg);
          }

          30% {
            transform: rotate(-180deg);
          }

          35% {
            transform: rotate(-190deg);
          }

          40% {
            transform: rotate(-180deg);
          }

          78% {
            transform: rotate(-180deg);
          }

          95% {
            transform: rotate(-360deg);
          }

          98% {
            transform: rotate(-370deg);
          }

          100% {
            transform: rotate(-360deg);
          }
        }

        @keyframes spin3 {
          0% {
            transform: rotate(0deg);
          }

          27% {
            transform: rotate(0deg);
          }

          40% {
            transform: rotate(180deg);
          }

          45% {
            transform: rotate(190deg);
          }

          50% {
            transform: rotate(180deg);
          }

          62% {
            transform: rotate(180deg);
          }

          75% {
            transform: rotate(360deg);
          }

          80% {
            transform: rotate(370deg);
          }

          85% {
            transform: rotate(360deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes spin4 {
          0% {
            transform: rotate(0deg);
          }

          38% {
            transform: rotate(0deg);
          }

          60% {
            transform: rotate(-360deg);
          }

          65% {
            transform: rotate(-370deg);
          }

          75% {
            transform: rotate(-360deg);
          }

          100% {
            transform: rotate(-360deg);
          }
        }
      </style>
      <div class="loading-container">
        <div class="dash uno"></div>
        <div class="dash dos"></div>
        <div class="dash tres"></div>
        <div class="dash cuatro"></div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
